<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>编辑开屏</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css" media="all">
  <style>
    .layui-table-tool {
      min-height: unset;
    }
    .layui-table-view .layui-table[lay-size="sm"] .layui-table-cell {
      height: 25px;
      line-height: 25px;
    }
  </style>
</head>
<body>


<div class="layui-form" lay-filter="layuiadmin-form-role" id="layuiadmin-form-role" style="padding: 20px 30px 0 0;">

  <div class="layui-form-item">
    <label class="layui-form-label">开屏名称</label>
    <div class="layui-input-block">
      <input type="text" name="name" lay-verify="required" autocomplete="off" class="layui-input"
             placeholder="自定义" value="{$info.name}">
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">授权App</label>
    <div class="layui-input-block">
      {foreach $qas as $vo}
      <input type="checkbox" name="quick_apps[]" value="{$vo.id}" title="{$vo.name}" lay-skin="primary" {in name="$vo.id" value="$info.quick_apps"}checked{/in}>
      {/foreach}
    </div>
  </div>


  <div class="layui-form-item">
    <label class="layui-form-label">测试读者</label>
    <div class="layui-input-block">
      <input type="text" name="test_user_id" lay-verify="num" autocomplete="off" class="layui-input"
             placeholder="请输入读者id，可不填" value="{$info.test_user_id}">
      <div class="layui-form-mid layui-word-aux">该用户无需判断下列条件，可用于查看开屏效果</div>
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">用户群体</label>
    <div class="layui-input-block">
      <input type="radio" name="user_grep" value="1" title="广告用户" {if $info['user_grep'] == 1}checked{/if}>
      <input type="radio" name="user_grep" value="2" title="屏蔽地区" {if $info['user_grep'] == 2}checked{/if}>
      <input type="radio" name="user_grep" value="0" title="不限" {if $info['user_grep'] == 0}checked{/if}>
    </div>
  </div>


  <div class="layui-form-item">
    <label class="layui-form-label">充值条件</label>
    <div class="layui-input-block">
      <input type="radio" lay-filter="is_pay" name="is_pay" value="0" title="不限"  {if $info['is_pay'] == 0}checked{/if}>
      <input type="radio" lay-filter="is_pay" name="is_pay" value="1" title="已充值" {if $info['is_pay'] == 1}checked{/if}>
      <input type="radio" lay-filter="is_pay" name="is_pay" value="2" title="未充值" {if $info['is_pay'] == 2}checked{/if}>
    </div>
  </div>

  <div class="layui-form-item" id="payItem" {if $info.is_pay != 1}style="display: none;"{/if}>
    <div class="layui-inline">
      <label class="layui-form-label">充值金额</label>
      <div class="layui-form-mid layui-word-aux">>=</div>
      <div class="layui-input-inline" style="width: 100px;">
        <input type="text" name="mini_pay_money" placeholder="￥" autocomplete="off" class="layui-input" lay-verify="money" value="{$info.mini_pay_money/100}">
      </div>
      <div class="layui-form-mid">元</div>
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">书币余额</label>
    <div class="layui-input-block">
      <input type="radio" name="coin_balance" value="1" title="不限" {if $info['coin_balance'] == 1}checked{/if}>
      <input type="radio" name="coin_balance" value="2" title="低于200" {if $info['coin_balance'] == 2}checked{/if}>
      <input type="radio" name="coin_balance" value="3" title="低于500" {if $info['coin_balance'] == 3}checked{/if}>
      <input type="radio" name="coin_balance" value="4" title="低于2000" {if $info['coin_balance'] == 4}checked{/if}>
      <input type="radio" name="coin_balance" value="5" title="低于5000" {if $info['coin_balance'] == 5}checked{/if}>
    </div>
  </div>


  <div class="layui-form-item">
    <label class="layui-form-label">注册范围</label>
    <div class="layui-input-block">
      <input type="radio" name="register_type" lay-filter="register" value="0" title="不限" {if $info['register_type'] == 0}checked{/if}>
      <input type="radio" name="register_type" lay-filter="register" value="1" title="自定义" {if $info['register_type'] == 1}checked{/if}>
    </div>
  </div>


  <div class="layui-form-item" id="registerItem" {if $info['register_type'] != 1}style="display:none;"{/if}>
    <div class="layui-input-block">
      <div class="layui-input-inline" style="width: 100px;">
        <input type="number" name="register_start" placeholder="可不填" autocomplete="off" class="layui-input" lay-verify="num" value="{$info.register_start}">
      </div>
      <div class="layui-form-mid">天外，且</div>
      <div class="layui-input-inline" style="width: 100px;">
        <input type="number" name="register_end" placeholder="可不填" autocomplete="off" class="layui-input" lay-verify="num" value="{$info.register_end}">
      </div>
      <div class="layui-form-mid">天内</div>
      <div class="layui-form-mid layui-word-aux">1天代表24小时不是自然日，如：一周内，只需填写第二项“7天内”，范围为闭区间</div>
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">开屏类型</label>
    <div class="layui-input-block">
      <input type="radio" name="type" lay-filter="type" value="1" title="推书" {if $info['type'] == 1}checked{/if}>
      <input type="radio" name="type" lay-filter="type" value="2" title="充值活动" {if $info['type'] == 2}checked{/if}>
      <input type="radio" name="type" lay-filter="type" value="3" title="外部链接" {if $info['type'] == 3}checked{/if}>
    </div>
  </div>


  <div class="layui-form-item" id="novelItem" {if $info['type'] != 1}style="display:none;"{/if}>
    <label class="layui-form-label">推送小说</label>
    <div class="layui-input-block">
      <script type="text/html" id="addNovel">
        <div class="layui-btn-container">
          <button class="layui-btn layui-btn-xs" lay-event="add">添加</button>
        </div>
      </script>
      <script type="text/html" id="table-useradmin-admin">
        <a class="layui-btn layui-btn-primary layui-border-red layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete" ></i></a>
      </script>
      <table lay-filter="parse-table-demo">
        <thead>
        <tr>
          <th lay-data="{field:'id', width:80}">小说ID</th>
          <th lay-data="{field:'title', width:150}">小说名</th>
          <th lay-data="{field:'scale', width:80,align: 'center'}">评级</th>
          <th lay-data="{field:'freq_class', minWidth: 180,align: 'center'}">频道 · 分类</th>
          <th lay-data="{field:'in_shelf',  width:100,align: 'center'}">是否上架</th>
          <th lay-data="{toolbar: '#table-useradmin-admin', width:80,align: 'center'}">操作</th>
        </tr>
        </thead>
        <tbody id="novelTable">
          <input type="hidden" id="novel_{$novel.id}" name="table_novel_id[]" value="{$novel.id}">
          <tr>
            <td>{$novel.id}</td>
            <td>{$novel.title}</td>
            <td>{$novel.scale}级</td>
            <td>{$novel.freq.name} · {$novel.novel_class.name}</td>
            <td>{if $novel.in_shelf == 1}上架{elseif $novel.in_shelf == 2 /}下架{else /}绝对下架{/if}</td>
            <td></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>


  <div class="layui-form-item" id="activityItem" {if $info['type'] != 2}style="display:none;"{/if}>
    <label class="layui-form-label">充值活动</label>
    <div class="layui-input-block">
      <select name="activity_id" lay-search>
        <option value="">请选择</option>
        {foreach $allActivity as $vo}
        <option value="{$vo.id}" {if $info['activity_id'] == $vo['id']}selected{/if}>{$vo.title}</option>
        {/foreach}
      </select>
      <div class="layui-form-mid layui-word-aux">可不上传封面，默认使用活动图片</div>
    </div>
  </div>


  <div class="layui-form-item"  id="jumpItem" {if $info['type'] != 3}style="display:none;"{/if}>
    <label class="layui-form-label">跳转地址</label>
    <div class="layui-input-block">
      <input type="text" name="jump_url"  autocomplete="off" class="layui-input"
             placeholder="外部链接地址如：http://cms.quick.com" value="{$info.jump_url}">
    </div>
  </div>


  <div class="layui-form-item" id="picItem">
    <label class="layui-form-label">开屏图片</label>
    <div class="layui-input-block">
      <div class="layui-upload-drag" id="pic">
        <div id="pic_head" {if $info['pic']}style="display:none;"{/if}>
          <i class="layui-icon"></i>
          <p>点击上传，或将文件拖拽到此处</p>
        </div>
        <div class="{if !$info['pic']}layui-hide{/if}" id="uploadDemoView">
          <img src="__IMG_DOMAIN__{$info.pic}" alt="上传成功后渲染" style="max-width: 128px;width: 128px;">
          <input type="hidden" name="pic" value="{$info['pic']}">
        </div>
      </div>
    </div>
  </div>

  <div class="layui-form-item layui-hide">
    <button class="layui-btn" lay-submit lay-filter="LAY-user-role-submit" id="LAY-user-role-submit">提交</button>
  </div>
</div>


<script src="/static/layuiadmin/layui/layui.js"></script>
<script>
  layui.config({
    base: '/static/layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'form', 'laydate','table'], function(){
    var $ = layui.$
            ,admin = layui.admin
            ,layer = layui.layer
            ,form = layui.form
            ,table = layui.table
            ,upload = layui.upload;


    table.init('parse-table-demo', { //转化静态表格
      //height: 'full-500'
       toolbar: '#addNovel' //开启头部工具栏，并为其绑定左侧模板
      , defaultToolbar: false
      , size: 'sm' //小尺寸的表格
    });

    form.on('radio(is_pay)', function(data){
      if (data.value == 1){
        $("#payItem").css('display','block');
      }else{
        $("#payItem").css('display','none');
      }
    });

    form.on('radio(register)', function(data){
      if (data.value == 1){
        $("#registerItem").css('display','block');
      }else{
        $("#registerItem").css('display','none');
      }
    });


    form.on('radio(type)', function(data){
      if (data.value == 1) {
        $("#novelItem").css('display', 'block');
        $("#activityItem").css('display', 'none');
        $("#jumpItem").css('display', 'none');
      } else if (data.value == 2) {
        $("#novelItem").css('display', 'none');
        $("#activityItem").css('display', 'block');
        $("#jumpItem").css('display', 'none');
      } else if (data.value == 3) {
        $("#novelItem").css('display', 'none');
        $("#activityItem").css('display', 'none');
        $("#jumpItem").css('display', 'block');
      }
    });


    //拖拽上传
    upload.render({
      elem: '#pic'
      ,accept:'images'
      ,acceptMime: 'image/jpeg, image/png'
      ,url: '/tool/uploadPic?dirName=popup' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
      ,done: function(res){
        if (res.code !== 0){
          layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.data.picUrl);
          layui.$('#uploadDemoView').find('input').val(res.data.filePath);
          layui.$('#pic_head').addClass('layui-hide');
          console.log(res)
        }else {
          layer.msg(res.msg);
        }
      }
    });


    /* 自定义验证规则 */
    form.verify({
      num: function (value) {
        if (value.length > 0) {
          var reg = /^[1-9]\d*$/; // 正整数的正则表达式
          if (!reg.test(value)) {
            return '请输入正确的值';
          }
        }
      },
      money: function (value) {
        if (value.length > 0) {
          var res = false;
          var regex = /^[0-9]+(\.[0-9]+)?$/;
          if (regex.test(value)) {
            var num = parseFloat(value);
            if (num > 0) {
              res = true;
            }
          }
          if (res === false) {
            return '请输入正确金额';
          }
        }
      },
    });


    table.on('toolbar(parse-table-demo)', function (obj) {
      switch (obj.event) {
        case 'add':
          $("#nIds").val('');
          layer.open({
            type: 1,
            title:'添加小说',
            offset: '15px',
            area: ['80%', '300px'],
            skin: 'layui-layer-demo', //样式类名
            closeBtn: 0, //不显示关闭按钮
            anim: 2,
            shadeClose: true, //开启遮罩关闭
            content: $('.hot-show'),
            btn: ['确定', '取消']
            ,yes: function(index, layero){
              var nIds = $("#nIds").val();
              if (nIds.length > 0) {
                let replacedText = nIds.replace(/，/g, ',');
                $("#nIds").val(replacedText);
                if (!isCommaSeparatedIds(replacedText)){
                   layer.msg('检查格式，请输入正确格式的小说id');
                   return false;
                }
                var nidArr = $('input[name="table_novel_id[]"]').map(function () {
                  return this.value;
                }).get();
                var newNidArr = replacedText.split(",");
                var saveArr = newNidArr.concat(nidArr);//c=[1,2,3,4,5,6];
                admin.req({
                  url: '/novel/renderNovels'
                  , type: "POST"
                  , data: {'nidArr': saveArr,'type':'open'}
                  , done: function (res) {
                    renderNovel(res.data);
                    layer.close(index);
                  }, not_finish: function (res) {
                    layer.msg(res.msg);
                  }
                });
              }else {
                layer.msg('请输入小说id');
              }
            }
          });
          break;
      }
    });


    function isCommaSeparatedIds(str) {
      var regex = /^\d+(,\d+)*$/;
      return regex.test(str);
    }

    /**
     * 渲染小说
     * @param novels
     */
    function renderNovel(novels) {
      $("#novelTable").empty();

      $.each(novels, function(index, data) {
        var row = $('<tr>'); // 创建一个 tr 行元素
        var idCell = $('<td>').text(data.id); // 使用键 id 的值创建一个 td 元素
        var nameCell = $('<td>').text(data.title); // 使用键 name 的值创建一个 td 元素
        var scaleCell = $('<td>').text(data.scale + '级'); // 使用键 age 的值创建一个 td 元素
        var freqCell = $('<td>').text(data.freq.name + ' . ' + data.novel_class.name); // 使用键 age 的值创建一个 td 元素
        if (data.in_shelf == 1) {
          var shelfCell = $('<td>').text('上架');
        } else if(data.in_shelf == 2) {
          var shelfCell = $('<td>').text('下架');
        }else if(data.in_shelf == 0){
          var shelfCell = $('<td>').text('绝对下架');
        }
        row.append(idCell, nameCell, scaleCell, freqCell,shelfCell); // 将 td 单元格添加到 tr 行中
        $('#novelTable').append(row);

        var row = $('<input type="hidden" id="novel_' + data.id + '" name="table_novel_id[]" value="' + data.id + '">');
        $('#novelTable').append(row);
      });


      table.init('parse-table-demo', { //转化静态表格
        toolbar: '#addNovel' //开启头部工具栏，并为其绑定左侧模板
        , defaultToolbar: false
        , size: 'sm' //小尺寸的表格
      });
    }

    //监听行工具事件
    table.on('tool(parse-table-demo)', function (obj) {
      var data = obj.data;
      if (obj.event === 'del') {
        document.getElementById("novel_" + data.id).remove();
        obj.del();
      }
    });

  });


</script>
</body>
<div class="hot-show" style="display: none;">

  <form class="layui-form layui-form-pane" style="padding: 10px;" action="">
    <div class="layui-form-item layui-form-text">
      <label class="layui-form-label">小说ID</label>
      <div class="layui-input-block">
        <textarea id="nIds" placeholder="请输入id，并用半角逗号分隔，如：1,2,3,4,5,6" class="layui-textarea"></textarea>
      </div>
    </div>
  </form>

</div>
</html>
